import { Dropdown, Menu, Tooltip } from 'antd';
import type { ReactNode } from 'react';
import { useCallback, useMemo } from 'react';
import style from './index.less';

type configProps = Record<
  string,
  {
    text: string;
    options: ReactNode[];
  }
>;

interface StpeStatusComponentProps {
  currentStatus: string;
  statusConfig: configProps[];
  currentStep: number;
  defatulSteps?: string[];
  toolTipOption?: ReactNode;
}
const StpeStatusComponent = (props: StpeStatusComponentProps) => {
  const {
    currentStatus = 'DRAFT',
    statusConfig = [
      {
        DRAFT: {
          text: '草稿',
          options: [
            <a target="_blank" rel="noopener noreferrer" href=" ">
              编辑
            </a>,
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://www.antgroup.com"
            >
              删除
            </a>,
          ],
        },
      },
    ],
    currentStep = 0,
    defatulSteps = ['草稿', 'POC', '灰度', '正式运行'],
    toolTipOption,
  } = props;
  const currentClassName = useCallback(
    (idx: number) => {
      if (idx < currentStep) return 'pastedStatus';
      else if (idx === currentStep) return 'currentStatus';
      else return '';
    },
    [currentStep],
  );
  const currentConfigItem = useMemo(() => {
    return statusConfig?.find((item: configProps) => item[currentStatus])?.[
      currentStatus
    ];
  }, [statusConfig, currentStatus]);
  const menu = useMemo(() => {
    const menuItems = currentConfigItem?.options?.map(
      (item: ReactNode, index: number) => ({
        key: index,
        label: item,
      }),
    );
    return <Menu style={{ textAlign: 'center' }} items={menuItems} />;
  }, [currentConfigItem?.options]);
  const renderDom = useMemo(() => {
    return (
      <div className={style.stepContainer}>
        {defatulSteps.map((item, index) => (
          <div className={currentClassName(index)} key={item}>
            {index === currentStep ? (
              <Dropdown overlay={menu}>
                <div className="content">{currentConfigItem?.text}</div>
              </Dropdown>
            ) : (
              <div className="content">{item}</div>
            )}
          </div>
        ))}
      </div>
    );
  }, [
    defatulSteps,
    currentClassName,
    currentStep,
    menu,
    currentConfigItem?.text,
  ]);
  return (
    <>
      {toolTipOption ? (
        <Tooltip
          title={toolTipOption}
          overlayInnerStyle={{ color: '#1890ff' }}
          color="#fff"
          placement="topRight"
          mouseLeaveDelay={0.5}
        >
          {renderDom}
        </Tooltip>
      ) : (
        renderDom
      )}
    </>
  );
};

export default StpeStatusComponent;
